<%@ page import="com.jcxy.pojo.User" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>李可的OA系统</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<script src="../layui/layui.js"></script>
<script src="../js/jquery-3.4.1.js"></script>
<body class="layui-layout-body" style="background-color: rgb(236,240,245);">
<div class="layui-layout layui-layout-admin">
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <div class="layui-header ${user.dictionary_value}">
        <div class="layui-logo" style="font-size: 24px;">
            <a href="" style="color: white">OA 毕业设计</a>
        </div>
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item">
                <a href="" style="font-size: 16px;color: white">
                    <i class="layui-icon layui-icon-set">控制台</i>
                </a>
            </li>
        </ul>
        <!-- 右上角用户区域 -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a>
                    <c:if test="${user.img == null}">
                        <img src="../img/defualt_headpotrait.png" class="layui-nav-img">${user.user_name}
                    </c:if>
                    <c:if test="${user.img != null}">
                        <img src="data:image/png;base64,${user.img_base65}" class="layui-nav-img" style="background-color: wheat">${user.user_name}
                    </c:if>
                </a>
                <dl class="layui-nav-child">
                    <dd><a id="a_userInfo" jump="/jsp/userInform.jsp">基本资料</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="../loginController/loginOut.do">退出</a></li>
        </ul>
    </div>

    <!-- 左边区域：导航列表 -->
    <div class="layui-side layui-bg-cyan">
        <li class="layui-side-scroll" style="width: auto">
            <!-- 用户信息 -->
            <div class="userInfo" style="text-align: center;padding: 10px 0; background-color: rgb(30,50,70)">
                <c:if test="${user.img == null}">
                    <img src="../img/defualt_headpotrait.png">
                </c:if>
                <c:if test="${user.img != null}">
                    <img src="data:image/png;base64,${user.img_base65}" style="width: 96px;height: 96px;background-color: wheat;border-radius: 100px">
                </c:if>
                <div style="font-size: 18px">
                    <span>${user.role.role_name}</span>
                </div>
            </div>
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-shrink="all">
                <!-- 循序父节点 -->
                <c:forEach var="parentNode" items="${user.role.menuList}">
                    <c:if test="${parentNode.parentId == 0}">
                        <li class="layui-nav-item" style="border-bottom: 2px solid rgb(50,70,90)">
                            <a class=" layui-bg-cyan">
                                <cite>${parentNode.menu_name}</cite>
                            </a>
                            <dl class="layui-nav-child">
                                <!-- 循序子节点 -->
                                <c:forEach var="childNode" items="${user.role.menuList}">
                                    <c:if test="${parentNode.menu_id == childNode.parentId}">
                                        <dd>
                                            <a class="menuItem" jump="${childNode.menu_url}">
                                                <i class="layui-icon layui-icon-radio" style="margin-right: 5px;">${childNode.menu_name}</i>
                                            </a>
                                        </dd>
                                    </c:if>
                                </c:forEach>
                            </dl>
                        </li>
                    </c:if>
                </c:forEach>
            </ul>
        </div>
    </div>
    <!-- 内容主体区域 -->
    <div class="layui-body" style="overflow-y: hidden;padding-top: 55px">
        <iframe scrolling="auto" width="100%" height="100%" src="console.jsp"></iframe>
    </div>


</div>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;
    });

    //为导航列表绑定点击事件
    $(".menuItem").click(jumpIframe);

    $("#a_userInfo").click(jumpIframe);

    /**
     * 跳转到jump属性值对应的页面
     */
    function jumpIframe(){

        $("iframe").attr("src",$(this).attr("jump"));
    }
</script>
</body>
</html>
